<template>
    <div>
      <Header :currentCity="currentCity" :cityList="cityList"></Header>
      <div class="map" id="container"></div>
      <div class="screen">
        <div class="screen-list">
          <el-select v-model="quyuValue" @change="selectChange($event, 'quyu')">
            <el-option
              label="区域"
              value="">
            </el-option>
            <el-option
              v-for="(item, index) in quyuData"
              :key="index"
              :label="item.shortRegionName"
              :value="item.regionId">
            </el-option>
          </el-select>
        </div>
        <div class="screen-list" v-show="ditieData.length > 0">
          <el-select v-model="ditieValue" @change="selectChange($event, 'ditie')">
            <el-option
              label="地铁"
              value="">
            </el-option>
            <el-option
              v-for="(item, index) in ditieData"
              :key="index"
              :label="item.lineName"
              :value="item.lineName">
            </el-option>
          </el-select>
        </div>
        <div class="screen-list">
          <el-select v-model="zhuangtaiValue" @change="selectChange($event, 'zhuangtai')">
            <el-option
              label="状态"
              value="">
            </el-option>
            <el-option
              v-for="(item, index) in zhuangtaiData"
              :key="index"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="screen-list">
          <el-select v-model="danjiaValue" @change="selectChange($event, 'danjia')">
            <el-option
              label="单价"
              value="">
            </el-option>
            <el-option
              v-for="(item, index) in danjiaData"
              :key="index"
              :label="item.name"
              :value="item.content">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="map-house-list">
        <div class="map-house-notice">为您找到<strong>{{houseTotal}}</strong>个楼盘</div>
        <ul v-infinite-scroll="load" style="overflow: auto">
          <li v-for="(item, index) in houseData" :key="index">
            <div class="map-house-list-cover pic">
              <a :href="`${prefixUrl}/lpxq/${item.estateId}.html`" target="_blank">
                <el-image :src="item.imgUrl" fit="cover" style="width: 100%;height: 100%;"></el-image>
              </a>
            </div>
            <div class="map-house-list-item">
              <h3>
                <a :href="`${prefixUrl}/lpxq/${item.estateId}.html`" target="_blank">{{item.name||''}}</a>
              </h3>
              <p class="area">
                <a :href="`${prefixUrl}/lpxq/${item.estateId}.html`" target="_blank">建面：{{item.area&&item.areaMax?`${item.area}-${item.areaMax}㎡`:'待定'}}</a>
              </p>
              <p class="price">
                <a :href="`${prefixUrl}/lpxq/${item.estateId}.html`" target="_blank" v-if="item.meterPrice">单价约：<strong>{{item.meterPrice}}</strong>元/m²</a>
                <a :href="`${prefixUrl}/lpxq/${item.estateId}.html`" target="_blank" v-else>单价约：待定</a>
              </p>
              <p class="label">
                <a :href="`${prefixUrl}/lpxq/${item.estateId}.html`" target="_blank" :class="`lbs-${item.saleStatus==0?'ds':item.saleStatus==1?'zs':'sq'}`">{{item.saleStatus==0?'待售':item.saleStatus==1?'在售':'售罄'}}</a>
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
import u from "@/plugins/Ccom";
var head = {
    title: "",
    content: "✖✖✖✖✖✖✖✖✖✖",
    keywords: "✖✖✖✖✖✖✖✖✖✖"
};
export default {
    head() {
      return {
        title: head.title,
        meta: [
            { name: "description", content: head.content },
            { name: "keywords", content: head.keywords }
        ],
        script: [
          { src: "https://api.map.baidu.com/api?type=webgl&v=1.0&ak=QD1alOi5Col7B5UU8ad6twt4tU2MEFRi" }
        ]
      };
    },
    data() {
      return {
        quyuValue: '',
        zhuangtaiData: [{
          name: '待售',
          value: 0,
        }, {
          name: '在售',
          value: 1,
        }, {
          name: '售罄',
          value: 2,
        }],
        zhuangtaiValue: '',
        ditieValue: '',
        danjiaValue: '',
        map: null,
      }
    },
    async asyncData(ctx) {
      var prefixUrl = ctx.prefixUrl;
      var currentCity = ctx.currentCity;
      var cityList = ctx.cityList;
      var cityCode = ctx.currentCity.cityCode;
      var smsState = ctx.smsState;
      var quyuData = [];
      var houseData = [];
      var ditieData = [];
      var danjiaData = [];
      var houseTotal = '';
      var total = 1;
      var queryParams = {
        pageNum: 1,
        pageSize: 10,
        cityCode,
        regionId: '',
        lineName: '',
        meterPriceStr: '',
        saleStatusStr: '',
      };
      var loupanData = [];

      // 获取当前城市所有区域
      let getQuyuData = await u.http({
        url: '/app/houseInfo/map/countRegionHouseByCityCode',
        params: queryParams
      })
      if (getQuyuData.code == 200) {
        quyuData = getQuyuData.data
      }
      // 获取地铁
      let getDitieData = await u.http({
        url: '/app/metro/queryMetroLineListByCityId',
        params: {
          cityId: cityCode
        }
      })
      if (getDitieData.code == 200) {
        ditieData = getDitieData.data
      }
      // 获取单价
      let getDanjiaData = await u.http({
        url: '/app/cfg/queryCfgDataByCmid',
        params: {
          cmId: 409,
        }
      })
      if (getDanjiaData.code == 200) {
        danjiaData = getDanjiaData.data
      }
      // 获取当前城市楼盘
      let getHouseData = await u.http({
        url: '/app/houseInfo/queryHouseInfoByLocal',
        params: {
          pageNum: 1,
          pageSize: 10,
          cityCode
        }
      })
      if (getHouseData.code == 200) {
        houseTotal = getHouseData.data.total;
        total = Math.ceil(getHouseData.data.total / queryParams.pageSize);
        houseData = getHouseData.data.list;
      }
      // 修改TDK
      head.title = `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`

      return {
        prefixUrl,
        currentCity,
        cityList,
        cityCode,
        smsState,
        quyuData,
        ditieData,
        danjiaData,
        houseData,
        houseTotal,
        total,
        queryParams,
        loupanData
      }
    },
    mounted() {
      // 创建Map实例
      this.map = new BMapGL.Map('container', {
        minZoom: 11,
        maxZoom: 20
      })
      this.map.centerAndZoom(new BMapGL.Point(this.currentCity.lng, this.currentCity.lat), 11); // 初始化地图,设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      this.setQuyuMarker()
      // 监听鼠标滚动事件
      this.map.addEventListener('zoomend', e => {
        if (this.map.getZoom() <= 11.1) {
          this.setQuyuMarker()
        }
        if (this.map.getZoom() >= 13) {
          let pt = this.map.getCenter()
          this.getLoupan(pt.lng, pt.lat)
        }
      })
      // 监听拖拽事件
      this.map.addEventListener('dragend', e => {
        if (this.map.getZoom() >= 13) {
          let pt = this.map.getCenter()
          this.getLoupan(pt.lng, pt.lat)
        }
      })
    },
    methods: {
      // 区域 状态
      selectChange(e, type) {
        this.queryParams.pageNum = 1;
        this.houseData = [];
        this.houseTotal = '';
        switch(type) {
          case 'quyu':
            this.ditieValue = '';
            this.queryParams.lineName = '';
            this.queryParams.regionId = e;
            break;
          case 'ditie':
            this.quyuValue = '';
            this.queryParams.regionId = '';
            this.queryParams.lineName = e;
            break;
          case 'danjia':
            this.queryParams.meterPriceStr = e;
            break;
          case 'zhuangtai':
            this.queryParams.saleStatusStr = e;
            break;
        }
        this.getHouseList()
      },
      // 筛选楼盘
      getHouseList() {
        u.http({
          client: true,
          url: '/app/houseInfo/queryHouseInfoByLocal',
          params: this.queryParams
        }).then(res => {
          if (res.code == 200) {
            this.houseTotal = res.data.total
            this.houseData = [...this.houseData, ...res.data.list]
          }
        })
      },
      // 懒加载
      load() {
        if (this.queryParams.pageNum >= this.total) {
          return false
        }
        this.queryParams.pageNum++
        this.getHouseList()
      },
      // 设置区域自定文本
      setQuyuMarker() {
        this.map.clearOverlays()
        this.quyuData.forEach(item => {
          var opts = {
            position: new BMapGL.Point(item.lng, item.lat), // 指定文本标注所在的地理位置
            offset: new BMapGL.Size(30, -30) // 设置文本偏移量
          };
          // 创建文本标注对象
          var label = new BMapGL.Label(`<div class="map-label" data-item='${JSON.stringify(item)}'><p class="name">${item.shortRegionName||''}</p><p>${item.totalCount||0}个楼盘</p></div>`, opts);
          // 自定义文本标注样式
          label.setStyle({
            borderColor: 'transparent',
            backgroundColor: 'transparent',
          })
          this.map.addOverlay(label);
          // 点击自定义文本事件
          label.addEventListener('click', e => {
            let _doc = e.target.domElement.querySelector('.map-label');
            let _item = _doc.getAttribute('data-item') ? JSON.parse(_doc.getAttribute('data-item')) : {};
            this.map.centerAndZoom(new BMapGL.Point(_item.lng, _item.lat), 15)
            this.getLoupan(_item.lng, _item.lat)
          })
        })
      },
      // 获取所有楼盘经纬度
      getLoupan(lng, lat) {
        u.http({
          client: true,
          url: '/app/houseInfo/queryHouseInfoByMap',
          params: {
            cityCode: this.cityCode,
            lnglatStr: lng&&lat ? lng + '~' + lat : '',
            juli: 10000
          }
        }).then(res => {
          if (res.code == 200) {
            this.loupanData = res.data
            this.setLoupanMarker()
          }
        })
      },
      // 设置楼盘自定文本
      setLoupanMarker() {
        this.map.clearOverlays() // 清除所有自定义文本
        this.loupanData.forEach(item => {
          var opts = {
            position: new BMapGL.Point(item.longitude, item.latitude), // 指定文本标注所在的地理位置
            offset: new BMapGL.Size(30, -30) // 设置文本偏移量
          };
          // 创建文本标注对象
          var label = new BMapGL.Label(`<div class="map-label-chilren"><a href="${this.prefixUrl}/lpxq/${item.estateId}.html" target="_blank"><p class="name">${item.name||''}</p><p class="price">${item.meterPrice?`单价约 <strong>${item.meterPrice}</strong>元/m²`:`单价约 <strong>待定</strong>`}</p></a></div>`, opts);
          // 自定义文本标注样式
          label.setStyle({
            borderColor: 'transparent',
            backgroundColor: 'transparent',
          })
          this.map.addOverlay(label);
        })
      }
    }
};
</script>
